<template>
	<view class="ranking-page">
		<detail-head url="../home/home" type="none"></detail-head>
		<view class="list-type">
			<view v-for="(item,index) in ranking" :class="['type', active === index+1 ? 'active' : '' ]" @click="onTabChange(index+1)">{{item.rankName}}</view>
		</view>
		<view class="content">
			<view class="list-item" v-for="(item,findex) in ranking" v-show="active === findex+1">
				<view class="list-head">
					<view class="head-td">排名</view>
					<view class="head-td">用户</view>
					<view class="head-td">数量</view>
				</view>
				<view class="list-body">
					<view class="body-tr" v-for="item, index in ranking[findex].rankingList" :key="item.sysUserId">
						<view class="body-td">
							<text v-if="index === 0" class="frist"></text>
							<text v-if="index === 1" class="second"></text>
							<text v-if="index === 2" class="third"></text>
							<text v-if="index > 2" class="other"></text>
							<text class="index">{{ index + 1 }}</text>
						</view>
						<view class="body-td">{{ item.wechatNickname }}</view>
						<view class="body-td">{{ item.total }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRankList,
		getRanking,
		getThreeRanking,
		getMonkeyRanking
	} from '../../request/ranking-api.js'
	export default {
		data() {
			return {
				// 作品类型
				active: 1,
				// 
				ranking: [],
				// 猴子
				monkeyRanking: [],
				// 其他
				threeRanking: [],
			}
		},
		created() {
			this.onLoadRanking()
		},
		methods: {
			onTabChange(index) {
				this.active = index
			},
			async onLoadRanking() {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					let {
						code,
						message,
						data
					} = await getRankList()
					if (code === 200) {
						this.ranking = data
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					console.log(err)
					uni.showToast({
						title: '服务繁忙',
						icon: 'error'
					})
				}
				uni.hideLoading()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-page {
		width: 100%;
		min-height: 100vh;
		background: $login-background-url no-repeat;
		background-size: 100% auto;
		background-position: 0rpx -40rpx;
		padding-bottom: 20rpx;
	}

	.content {
		border-radius: 30rpx 30rpx 0 0;
		background: #2B2A2F;
		padding: 28rpx 0 0 0;
		margin: 0px 20rpx 0 20rpx;
		min-height: 1020rpx;
	}

	.list-type {
		width: 700rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		display: flex;
		align-items: center;
		overflow-y: hidden;
		.type {
			flex: 1;
			width: auto;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #8D8D8D;
			margin: 0 20rpx;
			white-space: nowrap;
		}

		.active {
			color: #F7DE75;
		}
	}

	.list-item {
		padding: 0 40rpx;

		.list-head {
			height: 64rpx;
			display: flex;
			align-items: center;

			.head-td {
				font-size: 28rpx;
				color: #818286;
			}

			.head-td:nth-of-type(1) {
				flex: 0.2;
				padding: 0 16rpx 0 24rpx;
			}

			.head-td:nth-of-type(2) {
				flex: 0.58;
			}

			.head-td:nth-of-type(3) {
				flex: 0.22;
				text-align: center;
			}
		}

		.list-body {
			width: 100%;

			.body-tr {
				width: 100%;
				min-height: 64rpx;
				display: flex;
				align-items: center;
				margin: 0 0 20rpx 0;

				.body-td {
					font-size: 28rpx;
					display: flex;
					align-items: center;
					color: #BFCBCD;

					.frist {
						background: $ranking-1-url no-repeat;
						background-size: 56rpx 56rpx;
						background-position: top center;
					}

					.second {
						background: $ranking-2-url no-repeat;
						background-size: 56rpx 56rpx;
						background-position: top center;
					}

					.third {
						background: $ranking-3-url no-repeat;
						background-size: 56rpx 56rpx;
						background-position: top center;
					}

					.other {
						background: $ranking-4-url no-repeat;
						background-size: 56rpx 56rpx;
						background-position: top center;
					}

					text {
						display: inline-block;
						width: 64rpx;
						height: 64rpx;
						margin: 0 10rpx 0 0;
						display: inline-block;
					}
					.index {
						line-height: 64rpx;
					}
				}
			}

			.body-td:nth-of-type(1) {
				flex: 0.2;
				justify-content: center;
				margin-right: 40rpx;
			}

			.body-td:nth-of-type(2) {
				flex: 0.58;
			}

			.body-td:nth-of-type(3) {
				flex: 0.22;
				justify-content: center;
			}
		}
	}
</style>
